<template>
  <div>
    <el-row>
      <el-steps
        :space="120"
        :active="active"
        finish-status="success"
        :align-center="true"
      >
        <el-step v-for="item in process" :title="item.jdmc" :key="item.jdid" />
      </el-steps>
    </el-row>
    <el-row class="details" v-loading="loading">
      <div>
        <el-steps direction="vertical" :active="1" :space="50">
          <el-step
            v-for="item in steps"
            :title="item.title"
            :status="item.spzt === '1' ? 'success' : 'error'"
            :key="item.spid"
          >
            <template slot="description">
              <span style="width: 150px; display: inline-block;">处理人：{{ item.spr }}</span>
              <span>处理时间：{{ item.spsj }}</span>
              <br>
              <span>{{ item.spsm }}</span>
            </template>
          </el-step>
        </el-steps>
      </div>
    </el-row>
  </div>
</template>

<script>
import { getProcess } from '@/api/process';

export default {
  name: 'ProgressSteps',
  props: {
    approvalInfo: {
      type: Array,
      default: () => [],
    },
    userDic: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      active: 0,
      process: [],
      steps: [],
      loading: false,
    };
  },
  watch: {
    approvalInfo() {
      this.getApprovalInfo();
    },
  },
  methods: {
    getApprovalInfo() {
      this.steps = this.$lodash.cloneDeep(this.approvalInfo);
      this.steps = this.steps.map((item) => {
        const index = this.process.findIndex(fd => fd.jdid === item.jdid);
        const spjd = this.process[index];
        let title = '';
        if (index === 0) {
          title = `${spjd.jdmc}申请`;
        } else if (item.spzt === '1') {
          title = `${spjd.jdmc}审批通过`;
        } else if (item.spzt === '2') {
          title = `${spjd.jdmc}审批驳回`;
        }
        if (item.spsm) {
          item.spsm = `驳回原因：${item.spsm}`;
        }
        item.spr = this.userDic.find(fd => fd.username === item.spr).person.personName;
        return {
          ...item,
          title,
        };
      });
    },
    getProcess() {
      getProcess().then((res) => {
        if (res.code === 200) {
          this.process = res.data;
          const index = this.process.findIndex(item => item.jdid === this.approvalInfo[0].jdid);
          if (index < 0) {
            this.active = 1;
          } else {
            this.active = index + 1;
          }
          this.getApprovalInfo();
        }
      });
    },
  },
  mounted() {
    this.getProcess();
    console.log(this.approvalInfo);
  },
};
</script>

<style lang="scss" scoped>
.details {
  padding-left: 50px;
  margin-top: 20px;
  height: 300px;
  overflow: auto;
}
</style>
